<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>诊间小屏</title>
    <link rel="stylesheet" type="text/css" href="style/room.css">
    <script type="text/javascript" src="js/common.js"></script>
    <script>
        var PageRender = (function () {
            // 当前设备及诊室信息
            var _deviceRoom = ''
            var _clientId = ''
            var _appKey = ''
            var _appSecret = ''
            // 语音播报引擎
            var _broadcastEngine = null
            // 数据列表
            var _dataList = []
            var _emplLoginTimeout = null
            return {
                init: function(clientId, appKey, appSecret, broadcastEngine) {
                    _clientId = clientId
                    _appKey = appKey
                    _appSecret = appSecret
                    _broadcastEngine = broadcastEngine
                },
                setDevice: function (device) {
                  _deviceRoom = device
                },
                // 查询当前设备登陆的医生及叫号信息
                selectCurrentLogin: function () {
                    const that = this;
                    if (_deviceRoom && _deviceRoom.device) {
                        Utils.request(Utils.baseUrl + '/queue/device/' + _deviceRoom.device.id + '/connect/room/list', 'get', null, function(error, res) {
                            if (!error && res && res.code === 200 && res.data) {
                                _dataList = res.data
                                that.clear()
                                that.render()
                            }
                            if(_emplLoginTimeout) {
                                clearTimeout(_emplLoginTimeout)
                            }
                            _emplLoginTimeout = setTimeout(function () {
                                PageRender.selectCurrentLogin()
                            }, 10 * 1000)
                        })
                    }
                },
                clear: function () {
                    var persons = document.body.querySelectorAll(".yy-screen-content-list > .yy-screen-content_person")
                    for (var i = 0; i < persons.length; i++) {
                        var personEl = persons[i]
                        personEl.querySelector('.yy-screen-content_row-cell-roomName').innerText = ''
                        personEl.querySelector('.yy-screen-content_row-cell-itemName').innerText = ''
                        personEl.querySelector('.yy-screen-content_row-cell-doctorName').innerText = ''
                        personEl.querySelector('.yy-screen-content_row-cell-phone svg').style.display = ''
                        personEl.querySelector('.yy-screen-content_row-cell-phone img').style.display = 'none'
                        personEl.querySelector('.yy-screen-content_row-cell-doctorLevel').innerText = ''
                        // personEl.querySelector('.yy-screen-content_row-cell-doctorAbility').innerText = ''
                        personEl.querySelector('.yy-screen-content_row-cell-item--just').innerText = ''
                        var awaitEls = personEl.querySelectorAll('.yy-screen-content_row-cell-item--await')
                        for(var w = awaitEls.length - 1; w >= 0; w--) {
                            if (awaitEls[w]) {
                                awaitEls[w].innerText = ''
                            }
                        }
                    }
                },
                render: function () {
                    var persons = document.body.querySelectorAll(".yy-screen-content-list > .yy-screen-content_person")
                    for (var i = 0; i < persons.length; i++) {
                        if (_dataList[i]) {
                            var dataRow = _dataList[i]
                            var personEl = persons[i]
                            var emplName = dataRow.emplName
                            // if (dataRow.emplStatus !== undefined && dataRow.emplStatus !== null && dataRow.emplStatus === 0) {
                            //     emplName += `(<span  style="color:red;">暂停</span>)`
                            // }
                            personEl.querySelector('.yy-screen-content_row-cell-roomName').innerText = dataRow.roomName
                            personEl.querySelector('.yy-screen-content_row-cell-itemName').innerText = dataRow.departName
                            if (dataRow.emplPhoto) {
                                personEl.querySelector('.yy-screen-content_row-cell-phone svg').style.display = 'none'
                                personEl.querySelector('.yy-screen-content_row-cell-phone img').setAttribute("src", Utils.baseUrl + dataRow.emplPhoto)
                                personEl.querySelector('.yy-screen-content_row-cell-phone img').style.display = ''
                            } else {
                                personEl.querySelector('.yy-screen-content_row-cell-phone svg').style.display = ''
                                personEl.querySelector('.yy-screen-content_row-cell-phone img').style.display = 'none'
                            }
                            personEl.querySelector('.yy-screen-content_row-cell-doctorName').innerHTML = emplName
                            personEl.querySelector('.yy-screen-content_row-cell-doctorLevel').innerText = dataRow.levelName || ''
                            personEl.querySelector('.yy-screen-content_row-cell-doctorAbility').innerText = dataRow.ability || ''

                            if (dataRow.emplStatus !== undefined && dataRow.emplStatus !== null && dataRow.emplStatus === 0) {
                                personEl.querySelector('.yy-screen-content_row-cell--close').style.display = "flex"
                                personEl.querySelector('.yy-screen-content_row-cell--open').style.display = "none"
                            } else {
                                personEl.querySelector('.yy-screen-content_row-cell--close').style.display = "none"
                                personEl.querySelector('.yy-screen-content_row-cell--open').style.display = "flex"
                                if (dataRow.just && dataRow.just.length) {
                                    var just = dataRow.just[dataRow.just.length - 1]
                                    var rowJustEleHtml = '<span>';
                                    if (just.subQueueFlag === 7) {
                                        rowJustEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">VIP</span>`
                                    } else  if (just.subQueueFlag === 6) {
                                        rowJustEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">优</span>`
                                    } else if(just.subQueueFlag === 3) {
                                        rowJustEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">回</span>`
                                    } else if(just.scheduleFlag) {
                                        rowJustEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">预</span>`
                                    } else {
                                        rowJustEleHtml += just.registerNo  + "号 "
                                    }
                                    rowJustEleHtml += `<span>${Utils.formatPatientName(just.patientName)}</span>`
                                    // if (just.scheduleFlag && just.scheduleSignState && +just.scheduleSignState === 3) {
                                    //     rowJustEleHtml+= `(迟到)`
                                    // }
                                    rowJustEleHtml += '</span>';
                                    personEl.querySelector('.yy-screen-content_row-cell-item--just').innerHTML = rowJustEleHtml
                                } else {
                                    personEl.querySelector('.yy-screen-content_row-cell-item--just').innerText = ''
                                }
                                var awaitEls = personEl.querySelectorAll('.yy-screen-content_row-cell-item--await')
                                if (dataRow.await && dataRow.await.length) {
                                    for(var w = dataRow.await.length - 1; w >= 0; w--) {
                                        if (awaitEls[w]) {
                                            var rowAwaitEleHtml = '<span>'
                                            if (dataRow.await[w].subQueueFlag === 7) {
                                                rowAwaitEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">VIP</span>`
                                            } else  if (dataRow.await[w].subQueueFlag === 6) {
                                                rowAwaitEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">优</span>`
                                            } else if (dataRow.await[w].scheduleFlag) {
                                                rowAwaitEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">预</span>`
                                            }  else if(dataRow.await[w].subQueueFlag === 3) {
                                                rowAwaitEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">回</span>`
                                            } else {
                                                rowAwaitEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">${dataRow.await[w].registerNo  + "号 "}</span>`
                                            }
                                            rowAwaitEleHtml += `<span>${Utils.formatPatientName(dataRow.await[w].patientName)}</span>`
                                            // if (dataRow.await[w].scheduleFlag && dataRow.await[w].scheduleSignState && +dataRow.await[w].scheduleSignState === 3) {
                                            //     rowAwaitEleHtml+= `(迟到)`
                                            // }
                                            if (dataRow.await[w].passedFlag == 1) {
                                                rowAwaitEleHtml += "(过)"
                                            }
                                            rowAwaitEleHtml += '</span>'
                                            awaitEls[w].innerHTML = rowAwaitEleHtml
                                        }
                                    }
                                } else {
                                    for(var w =awaitEls.length - 1; w >= 0; w--) {
                                        if (awaitEls[w]) {
                                            awaitEls[w].innerText = ''
                                        }
                                    }
                                }
                            }
                        }
                    }
                },
                add: function (data) {
                    var index = _dataList.findIndex(item => item.roomId === data.roomId && item.emplId === data.emplId)
                    if (index < 0) {
                        this.clear()
                        _dataList.push(data)
                        this.render()
                    }
                },
                remove: function (data) {
                    this.clear()
                    var index = _dataList.findIndex(item => item.roomId === data.roomId && item.emplId === data.emplId)
                    if (index >= 0) {
                        _dataList.splice(index, 1)
                        this.render()
                    }
                },
                call: function (data) {
                    const index = _dataList.findIndex(item => item.roomId === data.roomId && item.emplId === data.emplId)
                    if (index >= 0) {
                        _dataList[index].just = data.just
                        if (data.await && data.await.length ) {
                            _dataList[index].await = data.await
                        }
                    } else {
                        this.add(data)
                    }
                    if (data.just && data.just.length) {
                        CallDialog.setBroadcastEngine(_broadcastEngine).show(data)
                    }
                    this.clear()
                    this.render()
                },
                changeEmplStatus: function (data) {
                    const index = _dataList.findIndex(item => item.roomId === data.roomId && item.emplId === data.emplId)
                    if (index >= 0) {
                        _dataList[index].emplStatus = data.status
                        this.clear()
                        this.render()
                    }
                }
            }
        })()
        window.onload = function () {
            var params = Utils.getQueryParams(window.location.href)
            if (params) {
                if (params.server_url) {
                    Utils.baseUrl = params.server_url
                }
                if (params.customer_title) {
                    document.querySelector('div.yy-screen-header_customer div.customer-title').innerHTML = decodeURIComponent(params.customer_title)
                }
                if (params.customer_logo) {
                    document.querySelector('div.yy-screen-header_customer div.customer-logo > img').setAttribute("src", decodeURIComponent(params.customer))
                    document.querySelector('div.yy-screen-header_customer div.customer-logo').style.display = ''
                } else {
                    document.querySelector('div.yy-screen-header_customer div.customer-logo').style.display = 'none'
                }
                PageRender.init(params.client_id, params.app_key, params.app_secret, window.Android)
            }
            SSEUtils.open(params.ip, function callback(res) {
                if (res.action === "SSE_CONNECTED") {
                    PageRender.setDevice(res.data)
                    PageRender.selectCurrentLogin()
                } else if (res.action === "SSE_EMPLOYEE_LOGIN") {
                    console.log('-------empl login------------', res.data)
                    PageRender.add(res.data)
                } else if (res.action === 'SSE_EMPLOYEE_LOGOUT') {
                    console.log('-------empl logout------------', res.data)
                    PageRender.remove(res.data)
                } else if (res.action === 'SSE_EMPLOYEE_CALL_CHANGE') {
                    console.log('-------empl call------------', res.data)
                    res.data && PageRender.call(res.data)
                }else if (res.action === 'SSE_EMPLOYEE_STATUS_CHANGE') {
                    console.log('======on employee status change==========')
                    // 医生状态改变
                    PageRender.changeEmplStatus(res.data);
                }
            })
            DateTimeRender.render(null, function (dateArr, week) {
                document.querySelector('.yy-screen-header_time > .yy-screen-header_time-date > div:first-child').innerText = week
                document.querySelector('.yy-screen-header_time > .yy-screen-header_time-date > div:nth-child(2)').innerText = dateArr[1]+'月'+dateArr[2]+'日'
                document.querySelector('.yy-screen-header_time > .yy-screen-header_time-hour').innerText = dateArr.slice(3).join(":")
            })
            Utils.resetFontSize(1080, 1920)
            window.onresize = function () {
                Utils.resetFontSize(1080, 1920)
            }

        }
        window.onbeforeunload = function () {
            SSEUtils.stop()
        }
    </script>
</head>
<body>
    <div style="display: flex; flex-direction: column; min-height: 100%; width: 100%;">
        <div class="yy-screen-header">
            <div class="yy-screen-header_customer">
                <div class="customer-logo" style="width: 0.9rem;">
                    <img style="width:100%;" />
                </div>
                <div class="customer-title">
                </div>
            </div>
            <div class="yy-screen-header_time">
                <div class="yy-screen-header_time-date">
                    <div></div>
                    <div style="font-size: 0.22rem;"></div>
                </div>
                <div class="yy-screen-header_time-hour" style="display: flex; align-items: center;font-size: 0.4rem;margin-left: 0.05rem;"></div>
            </div>
        </div>
        <div class="yy-screen-content">
            <div class="yy-screen-content-list">
                <div class="yy-screen-content_person" style="flex: 1;">
                    <div class="yy-screen-content_row">
                        <div class="yy-screen-content_row-cell yy-screen-content_row-cell-title yy-screen-content_row-cell-roomName"></div>
                        <div class="yy-screen-content_row-cell yy-screen-content_row-cell-title yy-screen-content_row-cell-itemName"></div>
                    </div>
                    <div class="yy-screen-content_row" style="flex: auto;min-height: 0;">
                        <div class="yy-screen-content_column yy-screen-content_row-cell">
                            <div class="yy-screen-content_row-cell-phone">
                                <span class="avatar-icon">
                                  <img  style="display: none; height: 100%; max-width: 100%;" />
                                  <svg style="width: 100%; height: 100%; opacity: 0.5;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-6fbb019e=""><path fill="currentColor" d="M628.736 528.896A416 416 0 0 1 928 928H96a415.872 415.872 0 0 1 299.264-399.104L512 704zM720 304a208 208 0 1 1-416 0 208 208 0 0 1 416 0"></path></svg>
                               </span>
                            </div>
                            <div class="yy-screen-content_row-cell-item yy-screen-content_row-cell-doctorName yy-screen-content_row-cell-item--one"></div>
                            <div class="yy-screen-content_row-cell-item yy-screen-content_row-cell-doctorLevel yy-screen-content_row-cell-item--one"></div>
                            <div style="display: none;" class="yy-screen-content_row-cell-item yy-screen-content_row-cell-doctorAbility yy-screen-content_row-cell-item--desc"></div>
                        </div>
                        <div class="yy-screen-content_column yy-screen-content_row-cell">
                            <div class="yy-screen-content_row-cell--close" style="display: none; flex-direction: column; flex: 1; min-height: 0; align-items: center;justify-content: center;font-size: 2rem;padding: 0.5rem;">
                                暂停<br/>就诊
                            </div>
                            <div class="yy-screen-content_row-cell--open" style="display: none; flex-direction: column; flex: 1; min-height: 0;">
                                <div class="yy-screen-content_row-cell-title">正在就诊</div>
                                <div class="yy-screen-content_row-cell-item yy-screen-content_row-cell-item--just"></div>
                                <div class="yy-screen-content_row-cell-title">等候就诊</div>
                                <div class="yy-screen-content_row-cell-item yy-screen-content_row-cell-item--await"></div>
                                <div class="yy-screen-content_row-cell-item yy-screen-content_row-cell-item--await"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="yy-screen-content_person" style="flex: 1;">
                    <div class="yy-screen-content_row">
                        <div class="yy-screen-content_row-cell yy-screen-content_row-cell-title yy-screen-content_row-cell-roomName"></div>
                        <div class="yy-screen-content_row-cell yy-screen-content_row-cell-title yy-screen-content_row-cell-itemName"></div>
                    </div>
                    <div class="yy-screen-content_row" style="flex: auto;min-height: 0;">
                        <div class="yy-screen-content_column yy-screen-content_row-cell">
                            <div class="yy-screen-content_row-cell-phone">
                                <span class="avatar-icon">
                                  <img  style="display: none; height: 100%; max-width: 100%;" />
                                  <svg style="width: 100%; height: 100%; opacity: 0.5;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-6fbb019e=""><path fill="currentColor" d="M628.736 528.896A416 416 0 0 1 928 928H96a415.872 415.872 0 0 1 299.264-399.104L512 704zM720 304a208 208 0 1 1-416 0 208 208 0 0 1 416 0"></path></svg>
                               </span>
                            </div>
                            <div class="yy-screen-content_row-cell-item yy-screen-content_row-cell-doctorName yy-screen-content_row-cell-item--one"></div>
                            <div class="yy-screen-content_row-cell-item yy-screen-content_row-cell-doctorLevel yy-screen-content_row-cell-item--one"></div>
                            <div style="display: none;" class="yy-screen-content_row-cell-item yy-screen-content_row-cell-doctorAbility yy-screen-content_row-cell-item--desc"></div>
                        </div>
                        <div class="yy-screen-content_column yy-screen-content_row-cell">
                            <div class="yy-screen-content_row-cell--close" style="display: none; flex-direction: column; flex: 1; min-height: 0; align-items: center;justify-content: center;font-size: 2rem;padding: 0.5rem;">
                                暂停<br/>就诊
                            </div>
                            <div class="yy-screen-content_row-cell--open" style="display: none; flex-direction: column; flex: 1; min-height: 0;">
                                <div class="yy-screen-content_row-cell-title">正在就诊</div>
                                <div class="yy-screen-content_row-cell-item yy-screen-content_row-cell-item--just"></div>
                                <div class="yy-screen-content_row-cell-title">等候就诊</div>
                                <div class="yy-screen-content_row-cell-item yy-screen-content_row-cell-item--await"></div>
                                <div class="yy-screen-content_row-cell-item yy-screen-content_row-cell-item--await"></div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="yy-screen-footer">
            <div class="yy-screen-footer_company"></div>
            <div class="yy-screen-footer_text marquee" id="scrollText">
                <pre>请保持安静，为了您和他人的健康,请勿在医院内吸烟!</pre>
                <pre>请保持安静，为了您和他人的健康,请勿在医院内吸烟!</pre>
            </div>
        </div>
    </div>

    <div id="yy-screen-just-call" style="display: none;">
        <div class="yy-screen-just-call__message"></div>
    </div>
</body>
</html>